<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<div id="root">
	<blog-post>
      <h1 slot="header"><span>About Me</span></h1>
      <p>Here's some page content</p>
      <p slot="footer">Copyright 2016 Evan You</p>
      <p>If I have some content down here</p>
    </blog-post>
</div>	
<script>
	 Vue.component('blog-post', {
	      render: function(createElement) {
	        var header = this.$slots.header,//返回由VNode组成的数组
	          body = this.$slots.default,
	          footer = this.$slots.footer;
	          console.log(this.$slots)
	          console.log(header);
	          console.log(body);
	          console.log(footer);
	        return createElement('div', [
	          createElement('header', header),
	          createElement('main', body),
	          createElement('footer', footer)
	        ])
	      }
    });	
	var vm = new Vue({
		el : '#root',
		data : {}
	})
</script>
</body>
</html>